<script setup lang="ts">
import { BankOutlined, CopyOutlined } from '@ant-design/icons-vue';

import { errimage } from '#/base';
import { copyToClipboard } from '#/utils';

const props = defineProps({
  orderInfo: {
    type: Object,
    default: () => ({}),
  },
  temp: {
    type: String,
    default: '',
  },
});
const record = props.orderInfo;
const temp = props.temp;
</script>

<template>
  <div>
    <a-space :size="0" direction="vertical">
      <template v-if="temp === 'shopInfo'">
        <a-space>
          <a-tag color="orange"> <BankOutlined /> {{ record.shopName }} </a-tag>
        </a-space>
        <a-space direction="vertical">
          <a-space :size="2">
            <!-- <div class="text-sm">店铺订单号：</div> -->
            <div class="text-xs text-gray-500">
              {{ record.dyOrderId }}
            </div>
            <a-button
              shape="round"
              type="link"
              @click="
                () => {
                  copyToClipboard(record.dyOrderId);
                }
              "
            >
              <template #icon>
                <CopyOutlined class="text-xs" />
              </template>
            </a-button>
          </a-space>
        </a-space>
      </template>
      <template v-if="temp === 'orderInfo'">
        <!-- <a-divider style="margin: 0" /> -->
        <a-space align="start" class="mt-2">
          <div>
            <a-image :fallback="errimage" :src="record.mainPic" :width="60" />
          </div>
          <a-space :size="0" direction="vertical">
            <a-space>
              <a-tooltip>
                <template #title>{{ record.goodsTitle }}</template>
                <div class="w-52 truncate">{{ record.goodsTitle }}</div>
              </a-tooltip>
              <a-button
                shape="round"
                size="small"
                type="link"
                @click="
                  () => {
                    copyToClipboard(record.goodsTitle);
                  }
                "
              >
                <template #icon>
                  <CopyOutlined class="text-xs" />
                </template>
              </a-button>
            </a-space>
            <a-space v-if="0">
              <div class="text-xs">商品ID:</div>
              <div class="text-xs text-gray-500">{{ record.productId }}</div>
              <a-button
                shape="round"
                size="small"
                type="link"
                @click="
                  () => {
                    copyToClipboard(record.productId);
                  }
                "
              >
                <template #icon>
                  <CopyOutlined class="text-xs" />
                </template>
              </a-button>
            </a-space>
            <a-space align="start">
              <div class="text-xs">订单规格:</div>
              <a-tooltip>
                <template #title>{{ record.skuStr }}</template>
                <div class="w-48 truncate text-xs text-gray-500">
                  {{ record.skuStr }}
                </div>
              </a-tooltip>
            </a-space>
            <a-space v-if="0" align="start">
              <div class="text-xs">单价数量:</div>
              <div
                v-if="record.skuList && record.skuList.length > 0"
                class="text-xs text-gray-500"
              >
                ¥{{ Number((record.skuList[0].price / 100).toFixed(2)) }} x
                {{ record.quantity }}件
              </div>
            </a-space>
            <a-space>
              <div class="text-xs">实收:</div>
              <div class="text-base text-red-500">
                ¥{{ record.dyAmountStr }}
              </div>
            </a-space>
          </a-space>
        </a-space>
      </template>

      <template v-if="0">
        <a-divider style="margin: 0" />
        <div>
          <a-space :size="0" direction="vertical">
            <a-space>
              <div class="text-xs">买家备注:</div>
              <div class="w-64 text-xs text-gray-500">
                {{ record.buyerRemark || '买家未填写备注' }}
              </div>
            </a-space>
            <a-space>
              <div class="text-xs">商家备注:</div>
              <div class="w-64 text-xs text-gray-500">
                {{ record.remark || '未填写备注' }}
              </div>
            </a-space>
            <a-space align="start">
              <div class="text-xs">收货地址:</div>
              <div class="w-64 text-xs text-gray-500">
                {{ record.address }} {{ record.fullName }}
              </div>
            </a-space>
          </a-space>
        </div>
      </template>
    </a-space>
  </div>
</template>
